<script setup lang="ts">
import {getSellerList} from "@/utils/request";
import {computed, nextTick, onMounted, reactive} from "vue";
const vueData=reactive({
  tableData:[],
  total:0,
  query:{
    page:1,
    page_size: 30
  }
})
const pageLength=computed(()=>{
  return Math.ceil(vueData.total / vueData.query.page_size)
})
const init=()=>{
  getSellerList(vueData.query).then(res=>{
    vueData.tableData=res.data.data
    vueData.total=res.data.total
  })
}
const pageChange=(page)=>{
  vueData.query.page=page
  init()
}
init()
</script>

<template>
<div>
  <div class="pt-60px">
    <v-parallax width="100%" :height="320" src="@/assets/images/home-bg.png">
      <div class="w-full h-full flex flex-col items-center justify-center text-white">
        <div class="text-30px mb-30px">10000+商家都在用鲸喜多多</div>
        <div class="flex items-center text-18px">
          想在这里展示您的店铺
          <v-btn
            class="ml-10px"
            color="#ffffff"
            height="30px"
            @click="$router.push({name:'apply'})"
            variant="outlined">
            <span class="text-16px">申请入驻</span>
          </v-btn>
        </div>
      </div>
    </v-parallax>
  </div>
  <v-container class="!py-100px">
    <v-row no-gutters>
      <v-col v-for="(item,index) in vueData.tableData" :key="index" cols="12" sm="4" class="mb-33px">
        <div class="bottom-fade-in w-320px rounded-14px border-1px border-solid border-hex-EA612F overflow-hidden">
          <v-img :height="160" width="100%" cover :src="item.cover">
            <div class="h-full w-full bg1"></div>
          </v-img>
          <div class="p-20px">
            <div class="mb-32px">{{ item.seller_name }}</div>
            <div class="flex justify-between items-center">
              <div class="text-14px text-hex-EA612F">了解详情</div>
              <div class="text-hex-96999C text-14px">{{ item.group_name }}</div>
            </div>
          </div>
        </div>
      </v-col>
    </v-row>
    <v-pagination :value="vueData.query.page" @update:modelValue="pageChange" :length="pageLength" color="primary"></v-pagination>
  </v-container>
</div>
</template>

<style scoped>
.bg1{
  background: linear-gradient(71deg, #EA612F 0%, #EA612F 18%, rgba(234,97,47,0.6) 43%, rgba(255,255,255,0) 75%);
}
</style>
